<template>
  <!-- 客服审核页面 -->
  <view id="container">
    <!-- <u-alert-tips :show="show" type="error" @close="show = false" :title="title" :close-able="true"></u-alert-tips> -->
    <!-- 寻人类型 -->
    <view class="title wrapper">
      <view class="pd28">寻人类型：{{ detail_data.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
      <view class="pd28 bt1">标题：{{ detail_data.title }}</view>
    </view>

    <!-- 基本信息 -->
    <view class="info wrapper mt6">
      <view class="pd28">姓名：{{ detail_data.name }}</view>
      <view class="pd28 bt1">性别：{{ detail_data.sex === 1 ? '男' :  (detail_data.sex === 2 ? '女' : '')}}</view>
      <view class="pd28 bt1">年龄：{{ detail_data.age }}</view>
      <view class="pd28 bt1">身高：{{ detail_data.height }}</view>
    </view>

    <!-- 外貌特征 -->
    <view class="waimao wrapper mt6 pd28">
      <view class="tips">外貌特征：</view>
      <view>{{ detail_data.lost_trait }}</view>
    </view>

    <!-- 走失时间、地点 -->
    <view class="lose wrapper mt6">
      <view style="display: flex; align-items: center" class="pd28">
        <view>走失时间：</view>
        <image src="../../../static/search-detail/sj.png" style="width: 28rpx; height: 28rpx"></image>
        <view>{{ detail_data.lost_time }}</view>
      </view>
      <view style="display: flex; align-items: center" class="pd28 bt1">
        <view>走失地点：</view>
        <image src="../../../static/index/dw.png" style="width: 24rpx; height: 28rpx; margin-right: 5rpx"></image>
        <view style="width: 450rpx">{{ detail_data.address +  detail_data.address_detail}}</view>
      </view>
    </view>

    <!-- 走失描述 -->
    <view class="waimao wrapper mt6 pd28">
      <view class="tips">走失描述：</view>
      <view>{{ detail_data.describe }}</view>
    </view>

    <!-- 上传照片 -->
    <view class="waimao wrapper mt6 pd28">
      <view class="tips">提交照片：</view>
      <view class="image_box">
        <view v-for="(item, index) in detail_data.face_img" class="eve_image_box">
          <image :src="item" class="img" mode="aspectFill" v-if="item.indexOf('https') !== -1"></image>
          <image :src="vuex_api_HEADER + item" class="img" mode="aspectFill" v-else></image>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="waimao wrapper mt6 pd28">
      <view class="tips">联系方式：</view>
      <view class="phone-num">
        <view class="num" v-for="(item, index) in detail_data.phone">{{ item }}</view>
      </view>
    </view>

    <view class="reason wrapper mt6 pd28">
      <input type="text" v-model="reason" placeholder="请填写审核不通过的理由（审核通过可不填写）" />
    </view>

    <view class="btn">
      <view class="pass" @click="let_pass()">审核通过</view>
      <view class="alter" @click="reject(reason)">驳回修改</view>
    </view>
    <u-toast ref="uToast" />
    <u-modal v-model="model_show" :show-cancel-button="model_show_cancel" :content="model_content" @confirm="model_confirm(event_type)" @cancel="model_cancel" :async-close="true"> </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reason: '',
      detail_data: [],

      // 以下变量用来控制弹窗显示
      model_show: false,
      model_show_cancel: true,
      model_content: '',
      event_type: ''
    }
  },
  async onLoad(options) {
    // this.detail_data=JSON.parse(options.arg)
    this.detail_data = options;
    this.$u.api
      .KF_check_detail_info({
        id: options.id
      })
      .then((res) => {
        if (res.code == 200) {
          this.detail_data = res.data;
        }
      })
  },
  methods: {
    // 审核通过
    let_pass() {
      this.model_content = '确定要审核通过吗?'
      this.model_show = true
      this.event_type = 'pass'
    },

    // 驳回修改
    reject(reason) {
      let nopass = 1
      if (reason == '') {
        this.$refs.uToast.show({
          title: '请填写驳回原因',
          type: 'error'
        })
        return
      }
      this.event_type = 'nopass'
      this.model_content = '确定驳回吗?'
      this.model_show = true
    },
    // 客服点击确定
    model_confirm(type) {
      if (type == 'pass') {
				this.model_show = false;
        this.$u.api.KF_check_detail({
					id: this.detail_data.id,
					type: 0,
					cause: ''
				}).then((res) => {
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
        })
      }

      if (type == 'nopass') {
        this.$u.api.KF_check_detail({
					id: this.detail_data.id,
					type: 1,
					cause: this.reason
				}).then((res) => {
					this.model_show = false
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				})
      }
    },
    model_cancel() {
      this.model_show = false
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f6f3f7;
}

.wrapper {
  width: 686rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin: 0 auto;
}

.mt6 {
  margin-top: 6rpx;
}

.pd28 {
  padding: 28rpx 19rpx 26rpx 14rpx;
}

.bt1 {
  border-top: 1rpx solid #f5f5f7;
}

#container {
  .title {
    margin-top: 17rpx;
  }

  .waimao {
    display: flex;

    .tips {
      flex: 0 0 140rpx;
    }
    .phone-num {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .num {
        // width: 202rpx;
        // height: 58rpx;
        padding: 6rpx 8rpx;
        background-color: #eaf0f4;
        margin-right: 31rpx;
        // padding: 10rpx 12rpx;
        margin-bottom: 12rpx;
        border-radius: 6rpx;
        font-size: 26rpx;
      }
    }
  }

  .reason {
    height: 159rpx;
  }

  .btn {
    width: 686rpx;
    border-radius: 10rpx;
    margin: 0 auto;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 55rpx 0;

    .pass,
    .alter {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 297rpx;
      height: 74rpx;
      box-shadow: 0rpx 5rpx 51rpx 0rpx rgba(98, 172, 0, 0.3);
      border-radius: 35rpx;
    }

    .pass {
      background: #62ac00;
      margin-right: 18rpx;
    }

    .alter {
      background: #e65f1c;
    }
  }
}

.image_box {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  .eve_image_box {
    width: 32%;
    height: 131rpx;
    margin: 0 4rpx 4rpx 0;
  }
  .img {
    width: 100%;
    height: 100%;
    // margin-right: 9rpx;
  }
}
</style>
